<template>
  <div class="all">
    <!-- {{ByrelatData}} -->
    <!-- {{ByrelatData.links}} -->
    <div class="help">
      <div class="list">
        <div class="left1"></div>
        <div class="right">水表厂商</div>
      </div>
      <div class="list">
        <div class="left2"></div>
        <div class="right">经销商</div>
      </div>
      <div class="list">
        <div class="left3"></div>
        <div class="right">水司</div>
      </div>
      <div class="list">
        <div class="left4"></div>
        <div class="right">运维用户</div>
      </div>
    </div>
    <div id="OverallRelationship" class="overallRelationship-main"></div> <!-- style="width:1500px;height:1500px" -->
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: ['ByrelatData'],
  data() {
    return {
      echarts: null,
      CCC: this.ByrelatData.categories,
      NNN: this.ByrelatData.nodes,
      LLL: this.ByrelatData.links,
    }
  },
  watch: {
    ByrelatData: {
      deep: true,
      handler(newVal, oldVal) {
        this.CCC = JSON.parse(JSON.stringify(newVal.categories))
        this.NNN = JSON.parse(JSON.stringify(newVal.categories))
        this.LLL = JSON.parse(JSON.stringify(newVal.categories))
      },
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  mounted() {
    // console.log('VVVVVVVVVVVVVVVVVVVVVVVVVVV')
    // console.log(this.CCC,this.NNN,this.LLL)
    const C_C = this.CCC
    const C_N = this.NNN
    const C_L = this.LLL
    this.OP(C_C, C_N, C_L, () => {
      let width =
        document.querySelector('.all').parentNode.parentNode.parentNode.style
          .width
      let height =
        document.querySelector('.all').parentNode.parentNode.parentNode
          .clientHeight
      console.info('width--', width.split('p')[0])
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let OverallRelationship = document.getElementById('OverallRelationship')
      OverallRelationship.style.height = height - 40 + 'px'
      OverallRelationship.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(OverallRelationship)
      this.echarts.resize()
    },
    OP(CCC, NNN, LLL, call) {
      var dom = document.getElementById('OverallRelationship')
      this.echarts = echarts.init(dom)
      var app = {}
      var option = null
      //myChart.showLoading();
      var webkitDep = {
        type: 'force',
        categories: [{}, {}, {}, {}],
        nodes: NNN,
        links: LLL,
        //[{source: "6",target: "5"}]
        //[{source: "1266541751154376704",target: "1266543967252643840"}]
        //links:LLL //[{source: "6",target: "5"}]
      }
      //myChart.hideLoading();

      option = {
        //color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed'],
        //color: ["tan","red" , "yellow" , "blue"],
        color: ['#9F19C7', '#1984C7', '#C76919', '#C71919'],
        //legend: {
        // data: ["甲公司", "乙公司"] //此处的数据必须和关系网类别中name相对应
        //},
        series: [
          {
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
              normal: {
                show: true,
                position: 'right',
              },
            },
            draggable: true, //可拉的，可曳的
            data: webkitDep.nodes.map(function (node, idx) {
              // node.id = idx;
              return node
            }),
            categories: webkitDep.categories,
            categories: webkitDep.categories,
            force: {
              edgeLength: 80, //连线的长度
              repulsion: 200, //子节点之间的间距
            },
            edges: webkitDep.links,
          },
        ],
      }
      this.echarts.setOption(option)

      call && call()
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.overallRelationship-main {
  width: 320px;
  height: 400px;
}
.all {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  flex-direction: column;
  .help {
    position: absolute;
    bottom: 10px;
    right: 10px;
    .list {
      width: 100px;
      height: 20px;
      display: flex;
      border: 3px solid #ffffff;
      .left1 {
        flex: 1;
        background: #1984c7;
      }
      .left2 {
        flex: 1;
        background: #c76919;
      }
      .left3 {
        flex: 1;
        background: #c71919;
      }
      .left4 {
        flex: 1;
        background: #9f19c7;
      }
      .right {
        flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }
  }
}
</style>
